<template>
  <div class="box">
    <div class="table">
      <p :style="{ textAlign: 'right', marginBottom: '5px' }">
        <a-space>
          <a-button @click="extend" type="primary" link
            ><template #icon>
              <switcher-outlined />
            </template>
            配置继承</a-button
          >
          <a-button @click="action('add')" type="primary" link
            ><template #icon>
              <PlusOutlined />
            </template>
            添加</a-button
          ></a-space
        >
      </p>
      <a-table
        size="middle"
        :data-source="state.tableData"
        :columns="[
          {
            title: '年度',
            dataIndex: 'year',
            key: 'year',
          },
          {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '值',
            key: 'value',
            dataIndex: 'value',
          },
          {
            title: '操作',
            key: 'action',
            width: 80,
            align: 'center',
          },
        ]"
        stripe
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-space :size="10" spacer="|">
              <DeleteBtn
                title="确认删除?"
                label="删除"
                @onDelete="action('remove', record)"
              />
              <a-button type="link" @click="action('edit', record)" link
                ><template #icon>
                  <EditOutlined />
                </template>
                编辑</a-button
              >
            </a-space>
          </template>
        </template>
      </a-table>
    </div>
    <FormModal
      :formConfig="state.formConfig"
      @submit="submit"
      ref="dialogRef"
    />
  </div>
</template>

<script setup>
import { onBeforeMount, getCurrentInstance, reactive, ref } from "vue";
import _ from "lodash";
import FormModal from "@/components/FormModal.vue";
import DeleteBtn from "@/components/DeleteBtn.vue";
import dayjs from "dayjs";
import { factorCategory } from "@/utils/source";

const year = dayjs().year();
const yearOpts = [];
for (let i = 0; i < 20; i++) {
  const _year = year - i;
  yearOpts.push({ label: `${_year}年`, value: _year });
}

const category = _.map(factorCategory, (v) => v);

const { proxy } = getCurrentInstance();
const state = reactive({
  formConfig: {
    title: "因子指标信息提交",
    items: [
      {
        type: "hidden",
        name: "id",
      },
      {
        label: "年度",
        type: "select",
        name: "year",
        options: yearOpts,
        span: 12,
        rules: [
          {
            required: true,
            message: "请选择年度",
          },
        ],
      },
      {
        label: "名称",
        type: "select",
        name: "name",
        options: _.map(category, (v, i) => ({ label: v, value: v, key: i })),
        span: 12,
        rules: [
          {
            required: true,
            message: "请选择名称",
          },
        ],
      },
      {
        label: "值",
        type: "number",
        name: "value",
        span: 12,
        min: 0,
        rules: [
          {
            required: true,
            message: "请输入值",
          },
        ],
      },
    ],
  },
  tableData: [],
});
const dialogRef = ref();

const emits = defineEmits(["onChange"]);

const getList = () => {
  proxy.$axios.get("/config/list").then(({ success, data }) => {
    if (success) {
      state.tableData = _.orderBy(data, "id", "desc");
    }
  });
};

const submit = (values) => {
  let method = "post";
  let url = "/config";
  if (values.id) {
    method = "put";
    url += `/${values.id}`;
  }
  proxy.$axios({ method, data: values, url }).then(({ success }) => {
    if (success) {
      dialogRef.value.cancel();
      proxy.$message.success("提交成功");
      getList();

      emits("onChange");
    }
  });
};

const action = (type, record) => {
  if (type === "add") {
    dialogRef.value.handleOpenForm({ year });
  } else if (type === "edit") {
    dialogRef.value.handleOpenForm({ ...record });
  } else if (type === "remove") {
    proxy.$axios.delete(`/config/${record.id}`).then(({ success }) => {
      if (success) {
        getList();

        emits("onChange");
      }
    });
  }
};

//生命周期钩子函数
onBeforeMount(() => {
  getList();
});

const extend = () => {
  proxy
    .$axios({ method: "post", url: "/config/extend/lastyear" })
    .then(({ success }) => {
      if (success) {
        proxy.$message.success("同步成功");
        getList();
      }
    });
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;

  .table {
    flex: 1;
    padding: 2px;
    overflow-y: auto;
  }
}
</style>
